<style lang="scss" scoped>
.centerPopBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	.image {
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		margin-top: 10px;
	}
	.text {
		color: #999;
		font-size: 28rpx;
	}
}
</style>
<template>
	<view class="wodeSettingbgview flex-column">
		<view class="listContentView">
			<!-- <view class="flex-row limitContentView" @tap="clickSettingButton(1)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/settingaccountsafe.png">
				</image>
				<text class="listTitle">{{userInfo.setpwd == "0" ? "修改密码":"设置密码"}}</text>
			</view>
			<view class="flex-row limitContentView" @tap="clickSettingButton(7)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/zhuxiaozhanghao.png">
				</image>
				<text class="listTitle">注销账号</text>
			</view> -->
			<view class="flex-row limitContentView" @tap="clickSettingButton(1)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/zhsz.png"></image>
				<text class="listTitle">账号与安全</text>
				<image
					class="listImageIcon-right"
					src="https://mcdn.chatgk.com/xcx/static/images/wode/right-jiantou.png"
				></image>
			</view>
			<view class="flex-row limitContentView" @tap="clickSettingButton(13)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/tzsz.png"></image>
				<text class="listTitle">通知设置</text>
				<image
					class="listImageIcon-right"
					src="https://mcdn.chatgk.com/xcx/static/images/wode/right-jiantou.png"
				></image>
			</view>
		</view>
		<view class="listContentView">
			<view class="flex-row limitContentView" @tap="clickSettingButton(5)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/qkhc.png"></image>
				<text class="listTitle">清空缓存</text>
				<text class="listRightTitle">{{ fileSizeString }}</text>
				<image
					class="listImageIcon-right"
					src="https://mcdn.chatgk.com/xcx/static/images/wode/right-jiantou.png"
				></image>
			</view>
			<view class="flex-row limitContentView" @tap="clickSettingButton(2)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/dqbb.png"></image>
				<text class="listTitle">当前版本</text>
				<text class="listRightTitle">V{{ version }}</text>
				<image
					class="listImageIcon-right"
					src="https://mcdn.chatgk.com/xcx/static/images/wode/right-jiantou.png"
				></image>
			</view>
			<view class="flex-row limitContentView" @tap="clickSettingButton(3)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/yhxy.png"></image>
				<text class="listTitle">用户协议</text>
				<image
					class="listImageIcon-right"
					src="https://mcdn.chatgk.com/xcx/static/images/wode/right-jiantou.png"
				></image>
			</view>
			<view class="flex-row limitContentView" @tap="clickSettingButton(4)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/yszc.png"></image>
				<text class="listTitle">隐私政策</text>
				<image
					class="listImageIcon-right"
					src="https://mcdn.chatgk.com/xcx/static/images/wode/right-jiantou.png"
				></image>
			</view>
		</view>
		<view class="listContentView">
			<!-- <view class="flex-row limitContentView" @tap="clickSettingButton(11)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/wodeshezhi.png">
				</image>
				<text class="listTitle">消息通知设置</text>
			</view>
			<view class="flex-row limitContentView" @tap="clickSettingButton(12)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/wodehuiyuanka.png">
				</image>
				<text class="listTitle">个性化推荐设置</text>
			</view> -->

			<view class="flex-row limitContentView" @tap="clickSettingButton(8)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/fwrx.png"></image>
				<text class="listTitle">服务热线</text>
				<image
					class="listImageIcon-right"
					src="https://mcdn.chatgk.com/xcx/static/images/wode/right-jiantou.png"
				></image>
			</view>

			<!-- <view class="flex-row limitContentView" @tap="clickSettingButton(10)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/guwm.png">
				</image>
				<text class="listTitle">关于我们</text>
				<image class="listImageIcon-right" src="https://mcdn.chatgk.com/xcx/static/images/wode/right-jiantou.png">
				</image>
			</view> -->
			<view class="flex-row limitContentView" v-if="typeios" @tap="clickSettingButton(9)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/pf.png"></image>
				<text class="listTitle">我为{{ name }}打分</text>
				<image
					class="listImageIcon-right"
					src="https://mcdn.chatgk.com/xcx/static/images/wode/right-jiantou.png"
				></image>
			</view>
			<!-- <view class="spaceline"></view> -->
			<!-- <view class="flex-row limitContentView" @tap="clickSettingButton(2)">
				<image class="listImageIcon" src="https://mcdn.chatgk.com/xcx/static/images/wode/settingaboutus.png"></image>
				<text class="listTitle">当前版本</text>
			</view> -->
		</view>

		<view class="outbutton" @tap="clickSwitchbutton">切换账号</view>
		<view class="outbutton" style="margin-top: 20rpx" @tap="clickoutbutton">退出登录</view>
		<!-- 去登录弹窗 -->
		<centerPop
			:show.sync="centerPopShow"
			rightBtnText="去登录"
			@centerPopupClose="centerPopupClose"
			@centerPopupSubmit="centerPopupSubmit"
		>
			<template #default>
				<view class="centerPopBox">
					<text class="text">请先登录再进行操作</text>
					<image
						class="image"
						src="https://mcdn.chatgk.com/xcx/static/images/wode/headimageMan.png"
						mode=""
					></image>
				</view>
			</template>
		</centerPop>
		<loading v-show="loadshow"></loading>
	</view>

	<view class="popup" v-if="openShow" @touchmove.stop.prevent="stopscroll">
		<view class="popup-conrent">
			<view class="title">确认退出登录吗？</view>
			<view class="buttonList">
				<view
					class="close"
					@tap="
						() => {
							openShow = false;
						}
					"
				>
					<text class="txt">取消</text>
				</view>
				<view class="confirm" @tap="outButton">
					<text class="txt">确认</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import centerPop from '@/components/A_cus/centerPop.vue';
import { mapActions } from 'vuex';
import xcxInfo from '@/common/manager/xcxInfo.js';
import { remolveTemporaryInfo } from '@/common/utils.js';
export default {
	components: {
		centerPop
	},
	onLoad() {
		this.getStorageSize();
		this.getVersion();
	},

	data() {
		return {
			centerPopShow: false, //控制临时用户点击显示去登录弹窗
			loadshow: false,
			fileSizeString: '0B',
			version: '4.7.2',
			typeios: getApp().globalData.typeIos,
			userInfo: getApp().globalData.userInfo,
			openShow: false,
			name: xcxInfo.name
		};
	},
	methods: {
		// 去登录弹窗
		centerPopupSubmit() {
			uni.navigateTo({
				url: '/pages/login/login-home',
				success: () => {
					this.centerPopShow = false;
				}
			});
		},
		//取消
		centerPopupClose() {
			this.centerPopShow = false;
		},
		...mapActions(['asyncSetVolunteerInfo']),
		clickSettingButton(e) {
			if (uni.getStorageSync('is_visitor') == 1 && e == 1) {
				console.log('进入这里了');
				this.centerPopShow = true;
			} else {
				if (e == 1) {
					if (this.userInfo.setpwd == '0') {
						// uni.navigateTo({
						// 	url: "/pages/login/forget-password?isUpdate=true"
						// })
						uni.navigateTo({
							url: '/subpackages/subpackage1/pages/accountSecurity/accountSecurity'
						});
					} else {
						uni.navigateTo({
							url: '/pages/login/set-password'
						});
					}
				}
				if (e == 2) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/tabBar/wode/aboutus'
					});
				}
				//web-view 加载的 url 需要在后台配置域名白名单，
				//包括内部再次 iframe 内嵌的其他 url
				if (e == 3) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/userAgreement/userAgreement'
					});
				}
				if (e == 4) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/privacyPolicy/privacyPolicy'
					});
				}
				if (e == 10) {
					const date = {
						name: '关于我们',
						routerUrl: 'http://jsm.huixinshengxue.com/html/About.html'
					};
					uni.navigateTo({
						url:
							'/subpackages/subpackage1/pages/tabBar/wode/myWebview/myWebview?url=' + JSON.stringify(date)
					});
					// plus.runtime.openURL("http://jsm.huixinshengxue.com/html/About.html")
				}
				if (e == 5) {
					this.clearCache();
				}
				if (e == 7) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/zhuxiao/zhuxiao'
					});
				}
				if (e == 8) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/tabBar/wode/fuwurexian/fuwurexian'
					});
				}
				if (e == 9) {
					plus.runtime.openURL('https://apps.apple.com/cn/app/id6446615912');
				}
				if (e == 11) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/tabBar/wode/pushSetting/pushSetting?t=1'
					});
				}
				if (e == 12) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/tabBar/wode/pushSetting/pushSetting?t=2'
					});
				}
				if (e == 13) {
					uni.navigateTo({
						url: '/subpackages/subpackage1/pages/notification/notification'
					});
				}
			}
		},

		deleteAccount() {
			this.loadshow = true;
			this.$request.deleteAccount().then((res) => {
				this.loadshow = false;
				//删除成功
				this.removeUserInfo();
				uni.navigateBack({
					delta: 1
				});
			});
		},
		clickSwitchbutton() {
			uni.navigateTo({
				url: '/subpackages/subpackage1/pages/tabBar/wode/swichLoginUser'
			});
		},
		// 退出登录
		clickoutbutton() {
			this.openShow = true;
		},
		outButton() {
			remolveTemporaryInfo();
			this.$const.localstorageKeyList.forEach((i, v) => {
				uni.removeStorage({
					key: i
				});
			});
			this.removeUserInfo();
			uni.switchTab({
				url: '/pages/tabBar/home/home'
			});
		},
		removeUserInfo() {
			this.asyncSetVolunteerInfo(undefined);
			getApp().globalData.userInfo = undefined;
			getApp().globalData.collegeCollects = [];
			getApp().globalData.majorCollects = [];
			getApp().globalData.jobCollects = [];
			getApp().globalData.collegeContrasts = [];
			uni.removeStorageSync('token');
		},
		getStorageSize() {
			// #ifdef APP-PLUS
			let that = this;
			plus.cache.calculate(function (size) {
				let sizeCache = parseInt(size);
				if (sizeCache == 0) {
					that.fileSizeString = '0B';
				} else if (sizeCache < 1024) {
					that.fileSizeString = sizeCache + 'B';
				} else if (sizeCache < 1048576) {
					that.fileSizeString = (sizeCache / 1024).toFixed(2) + 'K';
				} else if (sizeCache < 1073741824) {
					that.fileSizeString = (sizeCache / 1048576).toFixed(2) + 'M';
				} else {
					that.fileSizeString = (sizeCache / 1073741824).toFixed(2) + 'G';
				}
			});
			// #endif
		},
		clearCache() {
			// #ifdef APP-PLUS
			var self = this;
			//使用plus.cache.clear 清除应用中的缓存数据
			plus.cache.clear(function () {
				uni.showToast({
					title: '清除成功!',
					icon: 'none',
					success() {
						self.fileSizeString = '0B';
					}
				});
			});
			// #endif
		},

		getVersion() {
			//#ifdef APP-PLUS
			// this.version=plus.runtime.versionCode
			// 获取本地应用资源版本号
			plus.runtime.getProperty(plus.runtime.appid, (info) => {
				this.version = info.version;
				// this.versionCode = info.versionCode ;
			});
			//#endif
		}
	}
};
</script>

<style lang="scss" scoped>
.wodeSettingbgview {
	background-color: #f8f8f8;
	/* height: calc(100vh + 35rpx + 160rpx); */
	padding: 16rpx 0;
	height: 100vh;
}

.listContentView {
	/* margin: 32rpx; */
	margin: 0 32rpx 16rpx 32rpx;
	padding: 12rpx 0 12rpx 0;
	border-radius: 20rpx;
	background-color: white;
}

.wodeSettingbgview:last-child {
	margin-bottom: 24rpx;
}

.limitContentView {
	height: 100rpx;
	align-items: center;
	display: flex;
	flex-direction: row;
}

.listImageIcon {
	margin: 20rpx 16rpx 20rpx 32rpx;
	width: 60rpx;
	height: 60rpx;
}

.listImageIcon-right {
	margin: 20rpx 16rpx 20rpx 32rpx;
	width: 44rpx;
	height: 44rpx;
}

.listTitle {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
}

.listRightTitle {
	margin-right: 32rpx;
	font-size: 28rpx;
	color: #464646;
	font-weight: bold;
}

.outbutton {
	width: calc(100% - 72rpx);
	height: 96rpx;
	color: #333333;
	background-color: white;
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	line-height: 96rpx;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 16rpx;
}

.spaceline {
	height: 2rpx;
	background-color: #f8f8f8;
}

.popup {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;

	.popup-conrent {
		width: 574rpx;
		background: #ffffff;
		border-radius: 24rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
			margin-top: 40rpx;
		}

		.content {
			margin: 16rpx 40rpx 40rpx;
			color: #666666;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			text-align: left;
			line-height: 40rpx;
		}

		.buttonList {
			display: flex;
			flex-direction: row;
			margin-top: 40rpx;

			.close,
			.confirm {
				width: 222rpx;
				height: 76rpx;
				background: #ff3b0a;
				border-radius: 38rpx;
				margin: 0 auto 64rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;

				.txt {
					font-size: 32rpx;
					color: #ffffff;
					font-weight: bold;
				}
			}

			.close {
				background: rgba(255, 59, 10, 0.05);
				margin-right: 44rpx;

				.txt {
					color: #ff3b0a;
				}
			}
		}
	}
}
</style>
